<template>
  <div class="person">
    <ul>
      <!--v-for 不仅可以遍历数组，也可以是遍历的次数-->
      <li v-for="item in list" :key="item.id">
        {{ item.name }},{{ item.age }} 岁
      </li>
    </ul>
  </div>
</template>

<script setup name="Person" lang="ts">
import { type Persons } from "../types";
import { defineProps } from "vue";
/*父子组件通信，父组件在子组件中添加了一个属性'a'='哈哈'，
子组件接收了它，就可以调用父组件传递过来的内容了*/

//接收a，同时将probs保存起来
/*
let x = defineProps(["a","list"]);
console.log(x); //输出的是Proxy(Object),里面包含了“哈哈”
*/

//接收 list + 限制类型 + 限制必要性: ? → 可传可不传
defineProps<{ list?: Persons }>();
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>